<template>
  <el-row>
    <!-- main区域 -->
    <!-- 左侧，占8列 -->
    <el-col :span="8">
      <el-card shadow="hover" class="peoCard">
        <div slot="header" class="clearfix">
          <span class="img">
            <img src="@/assets/img.png" alt="" />
          </span>
          <div class="name">
            <h3>Admin</h3>
            <div>超级管理员</div>
          </div>
        </div>
        <div class="text item">
          <div>
            <span class="left">上次登录时间：</span>
            <span>2022-2-2</span>
          </div>
          <div>
            <span class="left">上次登录地点：</span>
            <span>上海</span>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover">
        <el-table :data="buyData" height="440px" style="width: 100%">
          <el-table-column align="center" prop="name" label="品牌">
          </el-table-column>
          <el-table-column align="center" prop="todayBuy" label="今日购买">
          </el-table-column>
          <el-table-column align="center" prop="monthBuy" label="本月购买">
          </el-table-column>
          <el-table-column align="center" prop="totalBuy" label="总购买">
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <!-- 右侧，占16列 -->
    <el-col :span="16" class="orderRight">
      <el-card
        :body-style="{ display: 'flex', padding: 0 }"
        shadow="hover"
        v-for="p in orderData"
        :key="p.id"
        class="oneOrder"
      >
        <i
          :class="`el-icon-${p.icon}`"
          :style="`backgroundColor:${p.color}`"
        ></i>
        <div>
          <h3 class="value">￥{{ p.value }}</h3>
          <div class="name">￥{{ p.name }}</div>
        </div>
      </el-card>
      <el-card shadow="hover" class="lineChart">
        <div ref="line" style="width: 900px; height: 230px"></div>
      </el-card>
      <div class="all">
        <el-card :body-style="{ padding: 0 }" shadow="hover">
          <div style="width: 424px; height: 200px" ref="left"></div>
        </el-card>
        <el-card :body-style="{ padding: 0 }" shadow="hover">
          <div style="width: 424px; height: 200px" ref="right"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { mapState } from "vuex";
import { reqChartData } from "@/api/index";
import * as echarts from "echarts";
export default {
  name: "Home",
  computed: {
    ...mapState("navLeft", ["buyData"]),
    ...mapState("navLeft", ["orderData"]),
  },
  mounted() {
    this.$store.dispatch("navLeft/getBuyData");
    this.$store.dispatch("navLeft/getOrderData");
    // 在组件实例内，进行图表的配置
    reqChartData().then((res) => {
      if (res.code == 200) {
        let chart = res.data;
        const { pieData, lineData, barData } = chart;
        let line = echarts.init(this.$refs.line);
        let left = echarts.init(this.$refs.left);
        let right = echarts.init(this.$refs.right);

        // 指定图表的配置项和数据
        // 折线图
        let lineOption = {
          tooltip: {},
          legend: {
            data: ["huawei", "vivo", "oppo", "mi", "lenovo", "iphone"],
          },
          xAxis: {
            data: ["2022-1", "2022-2", "2022-3", "2022-4", "2022-5"],
          },
          yAxis: {
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
            },
          },
          series: [
            {
              name: "huawei",
              type: "line",
              data: lineData.huawei,
            },
            {
              name: "vivo",
              type: "line",
              data: lineData.vivo,
            },
            {
              name: "oppo",
              type: "line",
              data: lineData.oppo,
            },
            {
              name: "mi",
              type: "line",
              data: lineData.mi,
            },
            {
              name: "lenovo",
              type: "line",
              data: lineData.lenovo,
            },
            {
              name: "iphone",
              type: "line",
              data: lineData.iphone,
            },
          ],
        };
        // 饼状图
        let pieOption = {
          tooltip: {},
          series: [
            {
              type: "pie",
              data: pieData,
            },
          ],
        };
        // 柱状图
        let barOption = {
          dataset: {
            source: [
              [100, 400, 100, 500, 500, 100],
              [200, 200, 700, 300, 500, 500],
              [300, 300, 300, 500, 300, 300],
              [400, 100, 500, 400, 400, 200],
              [500, 500, 500, 500, 500, 100],
            ],
          },
          tooltip: {},
          legend: {
            data: ["huawei", "vivo", "oppo", "mi", "lenovo", "iphone"],
          },
          xAxis: {
            data: ["2022-1", "2022-2", "2022-3", "2022-4", "2022-5"],
          },
          yAxis: {
            axisLine: {
              show: true,
            },
            axisTick: {
              show: true,
            },
          },
          series: [
            {
              name: "huawei",
              type: "bar",
              encode: {
                y: 2,
              },
            },
            {
              name: "vivo",
              type: "line",
              encode: {
                y: 1,
              },
            },
            // {
            //   name: "oppo",
            //   type: "line",
            //   encode: {
            //     y: 2,
            //   },
            // },
            // {
            //   name: "mi",
            //   type: "line",
            //   encode: {
            //     y: 3,
            //   },
            // },
            // {
            //   name: "lenovo",
            //   type: "line",
            //   encode: {
            //     y: 4,
            //   },
            // },
            // {
            //   name: "iphone",
            //   type: "line",
            //   encode: {
            //     y: 5,
            //   },
            // },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        line.setOption(lineOption);
        right.setOption(pieOption);
        left.setOption(barOption);
      }
    });
  },
};
</script>

<style scoped lang='less'>
.peoCard {
  margin-bottom: 10px;
  .clearfix {
    display: flex;
    align-items: center;
    .img {
      margin-right: 50px;
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    }
    .name {
      text-align: center;
      h3 {
        font-size: 30px;
      }
    }
  }
  .text {
    line-height: 30px;
    font-size: 12px;
    .left {
      margin-right: 30px;
    }
  }
}
.orderRight {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .oneOrder {
    width: 30%;
    margin-bottom: 10px;
    text-align: center;
    height: 80px;
    i {
      // height: 100%;
      width: 80px;
      font-size: 30px;
      margin-right: 30px;
      line-height: 80px;
    }
    .value {
      font-size: 20px;
      line-height: 50px;
    }
    .name {
      font-size: 12px;
    }
  }
  .all {
    margin-top: 10px;
    width: 900px;
    display: flex;
    justify-content: space-between;
  }
}
</style>